<template>
  <div class="about-container">
    <div class="about-header">
      <h1>关于我们</h1>
      <p>感情解忧站，让每一段情感都被温柔对待</p>
    </div>

    <div class="about-content">
      <!-- 关于我们的故事 -->
      <section class="about-story">
        <h2>我们的故事</h2>
        <div class="story-content">
          <div class="story-text">
            <p>感情解忧站诞生于2024年，是一个致力于帮助人们解决情感困惑、分享情感经历的温暖社区。</p>
            <p>我们相信，每个人的情感故事都值得被倾听，每个情感困惑都能找到解答。在这个快节奏的世界里，我们希望为你提供一个可以倾诉、可以获得支持和理解的港湾。</p>
            <p>无论你是正在经历爱情的甜蜜，还是遭遇分手的痛苦；无论你是在友情中迷茫，还是在亲情中寻找平衡点，这里都有与你相似经历的人，都有关心和支持你的人。</p>
          </div>
          <div class="story-image">
            <div class="image-placeholder">❤️</div>
          </div>
        </div>
      </section>

      <!-- 我们的使命 -->
      <section class="our-mission">
        <h2>我们的使命</h2>
        <div class="mission-cards">
          <router-link to="#mission-listening" class="mission-link">
            <div class="mission-card">
              <div class="mission-icon">👂</div>
              <h3>用心倾听</h3>
              <p>为每一个需要倾诉的人提供一个安全、温暖的空间</p>
              <span class="view-details">了解更多 →</span>
            </div>
          </router-link>
          <router-link to="#mission-support" class="mission-link">
            <div class="mission-card">
              <div class="mission-icon">🤝</div>
              <h3>真诚支持</h3>
              <p>用专业的知识和真诚的态度帮助人们解决情感困惑</p>
              <span class="view-details">了解更多 →</span>
            </div>
          </router-link>
          <router-link to="#mission-warmth" class="mission-link">
            <div class="mission-card">
              <div class="mission-icon">💡</div>
              <h3>传递温暖</h3>
              <p>通过真实的故事和经验分享，让更多人感受到温暖和希望</p>
              <span class="view-details">了解更多 →</span>
            </div>
          </router-link>
          <router-link to="#mission-growth" class="mission-link">
            <div class="mission-card">
              <div class="mission-icon">🌱</div>
              <h3>共同成长</h3>
              <p>在分享和交流中，让每个人都能获得情感的成长和心灵的提升</p>
              <span class="view-details">了解更多 →</span>
            </div>
          </router-link>
          <router-link to="#mission-beauty" class="mission-link">
            <div class="mission-card">
              <div class="mission-icon">🌈</div>
              <h3>守护美好</h3>
              <p>守护每一份真挚的情感，让爱与美好在人间传递</p>
              <span class="view-details">了解更多 →</span>
            </div>
          </router-link>
          <router-link to="#mission-self" class="mission-link">
            <div class="mission-card">
              <div class="mission-icon">🔍</div>
              <h3>探索真我</h3>
              <p>帮助每个人在情感旅程中发现真实的自己，找到内心的力量</p>
              <span class="view-details">了解更多 →</span>
            </div>
          </router-link>
        </div>
      </section>

      <!-- 专业团队 -->
      <section class="our-team">
        <h2>专业团队</h2>
        <div class="team-members">
          <router-link to="#team-psychologist" class="team-link">
            <div class="team-member">
              <div class="member-avatar">👨‍⚕️</div>
              <h3>李老师</h3>
              <p>国家二级心理咨询师</p>
              <p>专注于情感关系咨询10年，帮助上千人解决情感困惑</p>
              <span class="view-details">查看详情 →</span>
            </div>
          </router-link>
          <router-link to="#team-family" class="team-link">
            <div class="team-member">
              <div class="member-avatar">👩‍⚕️</div>
              <h3>张老师</h3>
              <p>婚姻家庭咨询师</p>
              <p>擅长处理婚姻关系、亲子关系等家庭问题</p>
              <span class="view-details">查看详情 →</span>
            </div>
          </router-link>
          <router-link to="#team-founder" class="team-link">
            <div class="team-member">
              <div class="member-avatar">🧑‍💻</div>
              <h3>高同学</h3>
              <p>网站创始人</p>
              <p>邮箱：1066337017@qq.com</p>
              <p>微信：17853658772</p>
              <span class="view-details">查看详情 →</span>
            </div>
          </router-link>
        </div>
      </section>

      <!-- 联系我们 -->
      <section class="contact-us">
        <h2>联系我们</h2>
        <div class="contact-info">
          <p>如果你有任何问题、建议或合作意向，欢迎随时联系我们：</p>
          <div class="contact-details">
            <div class="contact-item">
              <span class="contact-label">邮箱：</span>
              <span class="contact-value">support@ganqingjieyou.com</span>
            </div>
            <div class="contact-item">
              <span class="contact-label">微信：</span>
              <span class="contact-value">ganqingjieyou</span>
            </div>
            <div class="contact-item">
              <span class="contact-label">公众号：</span>
              <span class="contact-value">感情解忧站</span>
            </div>
          </div>
        </div>
      </section>

      <!-- 加入我们 -->
      <section class="join-us">
        <h2>加入我们</h2>
        <p>如果你也对情感咨询、心理学感兴趣，欢迎加入我们的团队，一起帮助更多的人！</p>
        <router-link to="/join-us" class="join-btn">了解更多</router-link>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AboutView'
}
</script>

<style scoped>
.about-container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 2rem;
}

.about-header {
  text-align: center;
  margin-bottom: 3rem;
}

.about-header h1 {
  font-size: 2.5rem;
  color: #333;
  margin-bottom: 1rem;
}

.about-header p {
  color: #666;
  font-size: 1.1rem;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* 关于我们的故事 */
.about-story {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.about-story h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 1.5rem;
  text-align: center;
}

.story-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.story-text p {
  color: #666;
  line-height: 1.8;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.story-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-placeholder {
  font-size: 15rem;
  opacity: 0.8;
}

/* 我们的使命 */
.our-mission {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.our-mission h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: center;
}

.mission-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.mission-card {
  text-align: center;
  padding: 1.5rem;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.mission-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mission-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.mission-link:hover .mission-card {
  background-color: #fff9f8;
  border-color: #ff9a9e;
}

.mission-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.mission-card h3 {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}

.mission-link:hover .mission-card h3 {
  color: #ff9a9e;
}

.mission-card p {
  color: #666;
  line-height: 1.6;
}

/* 专业团队 */
.our-team {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.our-team h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: center;
}

.team-members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.team-member {
  text-align: center;
  padding: 1.5rem;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.team-link {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.team-link:hover .team-member {
  background-color: #fff9f8;
  border-color: #ff9a9e;
}

.member-avatar {
  font-size: 5rem;
  margin-bottom: 1rem;
}

.team-member h3 {
  font-size: 1.3rem;
  color: #333;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.team-link:hover .team-member h3 {
  color: #ff9a9e;
}

.team-member p {
  color: #666;
  margin-bottom: 0.5rem;
}

.team-member p:last-child {
  font-size: 0.9rem;
  line-height: 1.6;
}

.view-details {
  color: #ff9a9e;
  font-weight: 500;
  margin-top: auto;
  padding-top: 1rem;
  text-align: right;
  display: inline-block;
  align-self: flex-end;
  transition: transform 0.3s ease;
}

.mission-link:hover .view-details,
.team-link:hover .view-details {
  transform: translateX(5px);
}

/* 联系我们 */
.contact-us {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.contact-us h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 1.5rem;
  text-align: center;
}

.contact-info {
  text-align: center;
}

.contact-info p {
  color: #666;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
}

.contact-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem;
  background-color: #f8f9fa;
  border-radius: 5px;
}

.contact-label {
  font-weight: bold;
  color: #333;
  min-width: 80px;
}

.contact-value {
  color: #666;
}

/* 加入我们 */
.join-us {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.join-us h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 1rem;
}

.join-us p {
  color: #666;
  margin-bottom: 2rem;
  font-size: 1.1rem;
}

.join-btn {
  background-color: #ff9a9e;
  color: #fff;
  border: none;
  padding: 0.8rem 2rem;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.join-btn:hover {
  background-color: #f86d75;
  transform: translateY(-2px);
}

@media (max-width: 992px) {
  .story-content {
    grid-template-columns: 1fr;
  }
  
  .image-placeholder {
    font-size: 10rem;
  }
}

@media (max-width: 768px) {
  .about-container {
    padding: 1rem;
  }
  
  .about-header h1 {
    font-size: 2rem;
  }
  
  .about-story h2,
  .our-mission h2,
  .our-team h2,
  .contact-us h2,
  .join-us h2 {
    font-size: 1.5rem;
  }
  
  .mission-cards,
  .team-members {
    grid-template-columns: 1fr;
  }
  
  .image-placeholder {
    font-size: 8rem;
  }
}
</style>